window.onload = function () {
    function loadCanvas(element) {
        var parentNode = document.querySelector(element);
        var canvas = document.createElement("canvas");
        canvas.height = parentNode.clientHeight;
        canvas.width = parentNode.clientWidth;
        parentNode.appendChild(canvas);
        window.addEventListener("resize", function () {
            canvas.height = parentNode.clientHeight;
            canvas.width = parentNode.clientWidth;
        });
        return canvas
    };

    function init_Shader(gl) {
        

        var VERTEX_SHADER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'uniform mat4 u_Rotation;\n' +
            'void main(){\n' +
            'gl_Position = u_Rotation * a_Position;\n' +
            '}\n';

        var FRAGMENT_SHADER_SOURCE =
            'void main(){\n' +
            'gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n' +
            '}';

        // 1.1创建着色器对象
        var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
        var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);

        // 1.2装载着色器资源
        gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
        gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);

        // 1.3编译着色器
        gl.compileShader(vertex_shader_object);
        gl.compileShader(fragment_shader_object);

        // 2.1创建程序
        var program = gl.createProgram();

        // 2.2.附着着色器对象到program
        gl.attachShader(program, vertex_shader_object);
        gl.attachShader(program, fragment_shader_object);

        // 2.3.链接program
        gl.linkProgram(program);

        // 2.4.使用program
        gl.useProgram(program);

        return program;
    };

    function drawTriangle(gl, program,rotate){
        var a_Position = gl.getAttribLocation(program, "a_Position");
        var u_Rotation = gl.getUniformLocation(program, "u_Rotation");
        
        // 处理位置缓冲区
        var vertices = new Float32Array([.0,.0,.5,.5,.0,.5])
        var vertexBuffer = gl.createBuffer(gl.ARRAY_BUFFER);
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
        // 处理转移矩阵
        var rotationMatrix = new Float32Array([
                Math.cos(rotate), Math.sin(rotate), 0.0,        0.0,
               -Math.sin(rotate), Math.cos(rotate), 0.0,        0.0,
                0.0,                0.0,            1.0,        0.0,
                0.0,                0.0,            0.0,        1.0
            ]);
        gl.uniformMatrix4fv(u_Rotation, false, rotationMatrix);
        gl.clearColor(.0, .0, .0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
        return rotate;
    };

    function viewerMove(canvas,gl,program){
        canvas.style.cursor = "pointer";
        var currentRotate = drawTriangle(gl,program, 0);
        var finalRotate;
        
        canvas.onmousedown = function(e){
            if(e.buttons == 4){
                var startX = e.offsetX;
                var startY = e.offsetY;
                canvas.onmousemove = function (me) {
                    if(me.buttons == 4){
                        var endX = me.offsetX;
                        var endY = me.offsetY;
                        var dX = (endX - startX);
                        var dY = (endY - startY);
                        var d = Math.abs(dX)>Math.abs(dY)?dX:dY;
                        var radian = (d / canvas.width)*0.1;
                        var cumulativeRadian = radian + currentRotate;
                        finalRotate = drawTriangle(gl,program,cumulativeRadian);
                        currentRotate = finalRotate;
                    };
                };
            }
        };
        
        canvas.onmouseup = function () {
            canvas.onmousemove = null;
        };
    }

    // main
    function main(){
        var canvas = loadCanvas("#container");
        var gl = canvas.getContext("webgl");
        var program = init_Shader(gl);
        viewerMove(canvas,gl,program);
    };

    main();
}